import React, { useState, useEffect } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';
import type { FormProps } from 'antd';
import type * as crmTS from '../../store/crmsTS'
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import * as async from '../../store/crmsSlice';

interface Iprops {
    itemobj: {} | crmTS.shopTS
    title: string
    onCancel: () => void //回调函数
}

//添加和编辑的组件
const Myfrom: React.FC<Iprops> = (props) => {
    //console.log(props);

    //获取仓库的状态
    let obj = useAppSelector(state => state.crms1)
    let dispatch = useAppDispatch()

    //from表单实例
    const [form] = Form.useForm();
    //初始周期 数据回显
    useEffect(() => {
        form.setFieldsValue(props.itemobj)
    }, [])

    //表单验证时的回调
    const onFinish: FormProps<crmTS.shopTS>['onFinish'] = (values) => {
        console.log('Success:', values);
        //计算规格
        let specification = values.speciType == 1 ? ["全糖", "半糖", "无糖"] : ["加冰", "少冰", "不加冰"]
        //判断添加和编辑
        if (props.title == '添加') {
            //添加的对象 
            let obj = {
                ...values,
                "specification": specification,
                "id": new Date().getTime()
            }
            //执行添加的方法
            dispatch(async.async_addshoplist(obj))
        } else {
            //执行编辑的方法
            let obj = {
                ...values,
                "specification": specification,
                "id": props.itemobj.id
            }
            dispatch(async.async_editshoplist(obj))
        }

        //关闭弹层
        props.onCancel()
    };

    return (
        <Form onFinish={onFinish} form={form}>
            <Form.Item label="商品名称" name='title'
                rules={[{ required: true, message: 'Please input your username!' }]}>
                <Input />
            </Form.Item>

            <Form.Item label='商品分类' name='typeId'
                rules={[{ required: true, message: 'Please input your username!' }]}>
                <Select>
                    {
                        obj.typelist.map((item: crmTS.typeTS) => {
                            return <Select.Option key={item.id} value={item.typeId} >
                                {item.label}
                            </Select.Option>
                        })
                    }
                </Select>
            </Form.Item>

            <Form.Item label="商品价格" name='price'
                rules={[{ required: true, message: 'Please input your username!' }]}>
                <InputNumber />
            </Form.Item>

            <Form.Item label="商品状态" name='Collect'>
                <Switch />
            </Form.Item>.

            <Form.Item label="商品规格" name='speciType'
                rules={[{ required: true, message: 'Please input your username!' }]}>
                <Radio.Group
                    options={[
                        { value: 1, label: '可选糖' },
                        { value: 2, label: '可选冰' },
                    ]}
                />
            </Form.Item>

            <Form.Item>
                <Button htmlType="submit" type='primary'>完成</Button>
            </Form.Item>
        </Form>
    );
};

export default Myfrom;